<template>
    <div>
        <el-card>
            <el-table :data="sources" stripe style="width: 100%">
                <el-table-column prop="cTime" label="创建日期" width="120"></el-table-column>
                <el-table-column prop="sourcesName" label="资源名称" width="120"></el-table-column>
                <el-table-column prop="status" label="资源状态" width="120"></el-table-column>
                <el-table-column prop="sortNum" label="资源序号" width="80"></el-table-column>
                <el-table-column prop="sourcesUrl" label="资源地址"></el-table-column>
                <el-table-column prop="sourcesDesc" label="描述"></el-table-column>
                <el-table-column prop="id" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="editSources(scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog title="编辑分类信息" :visible.sync="dialogFormVisible">
            <el-form :model="updateSource"
                     status-icon ref="updateSource" label-width="80px">
                <el-form-item label="资源名称"
                              prop="sourcesName"
                              :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }]">
                    <el-input v-model="updateSource.sourcesName"
                              type="text"
                              show-word-limit
                              maxlength="10"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="资源状态"
                              prop="status"
                              :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }]">
                    <el-input v-model="updateSource.status"
                              type="text"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="资源地址"
                              prop="sourcesUrl"
                              :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }]">
                    <el-input v-model="updateSource.sourcesUrl"
                              type="text"
                              show-word-limit
                              maxlength="100"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="资源描述"
                              prop="sourcesDesc"
                              :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }]">
                    <el-input v-model="updateSource.sourcesDesc"
                              type="text"
                              show-word-limit
                              maxlength="120"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序序号"
                              prop="sortNum"
                              :rules="[
                                { required: true, message: '序号不能为空'},
                              ]">
                    <el-input v-model="updateSource.sortNum"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateSources('updateSource')">更改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {updateSourceServer} from '../../services'

    export default {
        name: "SourcesTable",
        props: ["sources"],
        data() {
            return {
                dialogFormVisible: false,
                updateSource: {}
            }
        },
        methods: {
            editSources(row) {
                this.updateSource = row
                this.dialogFormVisible = true
            },
            updateSources(sources) {
                this.$refs[sources].validate((valid) => {
                    if (valid) {
                        const update = {
                            id: this.updateSource.id,
                            sourcesName: this.updateSource.sourcesName,
                            sourcesDesc: this.updateSource.sourcesDesc,
                            status: this.updateSource.status,
                            sourcesUrl: this.updateSource.sourcesUrl,
                            sortNum: this.updateSource.sortNum
                        };
                        updateSourceServer(update).then(res => {
                            if (res.code === 2000) {
                                this.$message({type: 'success', message: '修改成功'})
                                this.updateSources = {}
                                this.dialogFormVisible = false
                            }
                        })
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>